<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Slider Captcha</title>
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<!-- Meta Name -->
<meta name="Description" content="Test page for Slider Captcha" />
<meta name="Language" content="en-EN" />
<meta name="Robots" content="all" />
<meta name="Author" content="João Pargana" />
<meta name="Copyright" content="GPL" />
<meta name="Distribution" content="Global" />
<meta name="Rating" content="General" />

<link rel="stylesheet" href="css/slider-captcha.css?ver=0.1" media="screen">

<script src="components/jQuery/dist/jquery.min.js?ver=0.1"></script>

<script src="components/jquery.ui/ui/jquery.ui.core.js?ver=0.1"></script>
<script src="components/jquery.ui/ui/jquery.ui.widget.js?ver=0.1"></script>
<script src="components/jquery.ui/ui/jquery.ui.mouse.js?ver=0.1"></script>
<script src="components/jquery.ui/ui/jquery.ui.draggable.js?ver=0.1"></script>
<script src="components/jquery.ui/ui/jquery.ui.droppable.js?ver=0.1"></script>

<script src="components/jquery-ui-touch-punch-improved/jquery.ui.touch-punch-improved.js"></script>

<script src="js/slider-captcha.js?ver=0.1"></script>
<script>
	$(document).ready(function() {
		$( '#slider' ).sliderCaptcha({
			face: {
				icon: 'plus',
				iconAfterUnlock: 'stop'
			}
		});
		$( '#slider_filled' ).sliderCaptcha({
			type: "filled",
			width: '300'
		});
		$( '#slider_full' ).sliderCaptcha({
			type: "filled",
			textFeedbackAnimation: 'swipe_overlap',
			hintText: "Swipe to submit",
			hintTextSize: '12',
			hintTextAfterUnlock: 'You can submit now',
			width: '300px',
			height: '25px',
			styles: {
				knobColor: "#5CDF3B",
				knobColorAfterUnlock: "#000000",
				backgroundColor: "#444",
				textColor: "#fff",
				textColorAfterUnlock: "#fff"
			},
			face: {
				top: 0,
				right: 9,
				icon: 'right-thin',
				textColor: '#ddd',
				textColorAfterUnlock: '#5CDF3B',
				topAfterUnlock: 0,
				rightAfterUnlock: 9,				
				iconAfterUnlock: 'flag'
			},
			events: {
				afterUnlock: function () {
					console.log("afterUnlock event");
				},
				beforeUnlock: function () {
					console.log("afterSubmit event");
				},
				beforeSubmit: function () {
					console.log("beforeSubmit event");
				},
				noSubmit: function() {
					console.log("noSubmit event");
				},				
				submitAfterUnlock: 1,
				validateOnServer: 1,
				validateOnServerParamName: "my_form_param_name"
			}
		});
		$( '#slider_full_1' ).sliderCaptcha({
			type: "filled",
			textFeedbackAnimation: 'swipe_overlap',
			hintText: "Swipe to submit",
			hintTextSize: '14',
			hintTextAfterUnlock: 'You can submit now',
			width: '95%',
			height: '40',
			styles: {
				knobColor: "#5CDF3B",
				knobColorAfterUnlock: "#000000",
				backgroundColor: "#444",
				textColor: "#fff",
				textColorAfterUnlock: "#fff"
			},
			face: {
				top: 0,
				right: 9,
				icon: 'right-thin',
				textColor: '#ddd',
				textColorAfterUnlock: '#5CDF3B',
				topAfterUnlock: 0,
				rightAfterUnlock: 9,				
				iconAfterUnlock: 'flag'
			},
			events: {
				afterUnlock: function () {
					console.log("afterUnlock event");
				},
				beforeUnlock: function () {
					console.log("afterSubmit event");
				},
				beforeSubmit: function () {
					console.log("beforeSubmit event");
				},
				noSubmit: function() {
					console.log("noSubmit event");
				},
				submitAfterUnlock: 0,
				validateOnServer: 1,
				validateOnServerParamName: "my_form_param_name"
			}
		});		
	})
</script>
</head>
<body>
	<main>
		<h3>Examples</h3>
		<h4>Almost normal slider</h4>
		<div id="slider"></div>
		<h4>Filled slider</h4>
		<div id="slider_filled"></div>
		<h4>Custom slider in a form</h4>
		<form method="post" action="/teste.php">
			<div>
				<input name="email" placeholder="Insira o seu email" class="input_box" type="email" id="email" pattern=".*@.*" required>
			</div>
			<div style="width: 250px;margin 0 auto;">
				<div id="slider_full"></div>
			</div>
			<input type="submit"/>
		</form>
		<form method="post" action="/teste.php">
			<div>
				<input name="email" placeholder="Insira o seu email" class="input_box" type="email" id="email" pattern=".*@.*" required>
			</div>
			<div style="width: 500px;">
				<div id="slider_full_1"></div>
			</div>
			<button type="submit"/>
		</form>		
</body>
</html>